<template>
  <span @click="handleClick"> 表格对话框 </span>
  <!-- 对话框配置项: 关闭时销毁, 可拖拽, 居中-->
  <el-dialog
    v-model="dialogTableVisible"
    title="Shipping address"
    destroy-on-close
    draggable
    center
  >
    <el-table :data="gridData">
      <el-table-column property="date" label="Date" width="150" />
      <el-table-column property="name" label="Name" width="200" />
      <el-table-column property="address" label="Address" />
    </el-table>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'

const dialogTableVisible = ref(false)
const gridData = ref([])
function handleClick() {
  // 显示对话框
  dialogTableVisible.value = true
  // 请求数据
  setTimeout(() => {
    console.log('拿到数据')
    gridData.value = [
      {
        date: '2016-05-02',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District',
      },
      {
        date: '2016-05-04',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District',
      },
      {
        date: '2016-05-01',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District',
      },
    ]
  }, 1000)
}
</script>
<style scoped>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
